<script setup lang="ts">
import { ref } from 'vue'
import { getProductBySn } from '@/api/product'

const productSn = ref('')
const product = ref(null)

async function handleGetProduct() {
  if (!productSn.value) {
    // You might want to add a message to the user here
    return;
  }
  try {
    const response = await getProductBySn(productSn.value)
    product.value = response.data
    console.log(response)
  } catch (error) {
    console.error("Failed to fetch product:", error)
    product.value = null; // Clear previous results on error
  }
}
</script>

<template>
  <div class="app-container">
    <el-card style="max-width: 480px;">
      <template #header>
        <div class="card-header">
          <span>通过产品SN获取产品信息</span>
        </div>
      </template>

      <el-input v-model="productSn" style="width: 240px; margin-right: 10px;" placeholder="请输入产品SN" />
      <el-button type="primary" @click="handleGetProduct">获取产品</el-button>

      <div v-if="product" style="margin-top: 20px;">
        <h3>产品信息:</h3>
        <pre>{{ product }}</pre>
      </div>
    </el-card>
  </div>
</template>
